<template>
  <div class="header flex items-center justify-between">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbs"
        :key="index"
        :to="item.path"
      >
        <span :class="{ current: index === breadcrumbs.length - 1 }">
          {{ $t(`page.${item.name}`) }}
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useGlobalStore } from "@/store/global";
const route = useRoute();
const router = useRouter();
const breadcrumbs = ref([]);
const { t, locale } = useI18n();
const globalStore = useGlobalStore();

let cacheList = computed(() => {
  return globalStore.$state.cacheList;
});
const getBreadcrumb = () => {
  breadcrumbs.value = [];
  let list = route.matched.filter((item) => {
    return item.meta && item.meta.title;
  });
  list.forEach((item) => {
    if (!!item.meta.parentSideItem) {
      let obj = router.resolve({ path: item.meta.parentSideItem });
      breadcrumbs.value.push({ name: obj.name, path: obj.fullPath });
    }
    breadcrumbs.value.push({ name: item.name, path: item.path });
  });
  console.log(breadcrumbs.value)
};
const delPreviousCache = (type = 0, obj1, obj2) => {
  let delCache;
  if (type === 0) {
    // 判断是否是子级页面，是不做处理
    if (
      obj1 &&
      obj1.meta &&
      obj1.meta.parentSideItem &&
      obj2 &&
      obj2.fullPath &&
      obj1.meta.parentSideItem === obj2.fullPath
    ) {
    } else {
      if (obj2 && obj2.meta && obj2.meta.parentSideItem) {
        delCache = router.resolve({ path: obj2.meta.parentSideItem });
      } else if (obj2) {
        delCache = router.resolve({ path: obj2.fullPath });
      }
    }
  } else {
    if (obj2 && obj2.meta && obj2.meta.parentSideItem) {
      delCache = router.resolve({ path: obj2.meta.parentSideItem });
    } else if (obj2) {
      delCache = router.resolve({ path: obj2.fullPath });
    }
  }
  if (
    delCache &&
    delCache.meta &&
    delCache.meta.cache &&
    cacheList.value.includes(delCache.name)
  ) {
    globalStore.delCacheItem(delCache.name);
  }
};
watch(
  () => route.path,
  (n, o) => {
    getBreadcrumb();
    console.log(n, o);
    // 针对单个记录页或问题报事页，点击详情后返回，保留列表页的筛选条件调用接口，跳转其他页面删除缓存,两个缓存页面之间跳转需要删除原先的
    let obj1 = router.resolve({ path: n });
    let obj2 = o ? router.resolve({ path: o }) : null;
    console.log(obj1, obj2);
    if (obj1.meta && obj1.meta.cache) {
      if (!cacheList.value.includes(obj1.name)) {
        delPreviousCache(1, obj1, obj2);
        globalStore.handleCacheList(obj1.name);
      }
    } else {
      delPreviousCache(0, obj1, obj2);
    }
  },
  { immediate: true }
);

getBreadcrumb();
</script>
<style scoped lang="scss">
.header {
  height: 40px;
  width: 100%;
}

.app-breadcrumb {
  span {
    color: #767571;
    font-weight: 500;
  }
  .current {
    color: #474747;
  }
}
</style>
